{% extends "login/base.html" %}

{% block subject %}
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="stylesheet" href="/static/fonts/ali/iconfont.css">
     <div class="login-box">
        <div class="reg-box">
            <h1 class="Welcome"> 欢迎登陆 </h1>
            <p>没有账号? <a href="/reg/"> 请注册</a></p>
        </div>
        <div class="login-form">
            {% csrf_token %}
            <div class="inp-div" >
                <p>用户名</p>
                <input type="text" id="username" placeholder="请输入用户名">
                <span id="user_err"></span>
            </div>
            <div class="inp-div inp-pwd">
                <p>密 码</p>
                <input type="password" id="password" placeholder="请输入密码" >
                <i class="word iconfont icon-yincang"></i>
                <span id="pwd_err"></span>
            </div>
            <div class="inp-div" >
                <p>验证码</p>
                <input type="text" id="code" placeholder="请输入验证码">
                <span id="code_err"></span>
            </div>
            <img id="code_img" src="/get_code_img/" alt="请刷新验证码">
            <button id="but">登 陆</button>
            <a href="javascript:void(0)">忘记密码?</a>
        </div>
    </div>
    <script>
        $(".inp-pwd input").focus(function (){
            $(".inp-pwd .iconfont").css({"display": "block"}).click(function (){
                if ($(this).hasClass('icon-yincang')){
                    $(this).removeClass("icon-yincang").addClass("icon-xianshi").prev().attr('type','text');
                } else {
                    $(this).removeClass("icon-xianshi").addClass("icon-yincang").prev().attr('type','password');
                }
            });



        });
        $('#but').click(function(){
            $.ajax({
                url:"",
                type:"post",
                data:{
                    username:$("#username").val(),
                    password:$("#password").val(),
                    code:$("#code").val(),
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                },
                success:function(response){
                    console.log(response);
                    if(response.username){
                        location.href="/index/"
                    } else if (response.error){
                        $("#code_err").html("");
                        $("#pwd_err").html(response.error).css({"color":"red","font-size":"11px","margin-top":"5px"});
                    } else {
                        $("#pwd_err").html("");
                        $("#code_err").html(response.code).css({"color":"red","font-size":"11px","margin-top":"5px"});
                    }
                }
            })
        })
        {#刷新验证码#}
        $("#code_img").click(function(){
            this.src+="?";
        })
    </script>
{% endblock subject %}